<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="24" :xs="24">
        <el-form
          ref="queryForm"
          :model="queryReserParams"
          :inline="true"
          label-width="120px"
        >
          <el-form-item label="房间类型id" prop="roomTypeId">
            <el-input
              v-model="queryReserParams.roomTypeId"
              placeholder="请输入房间类型id"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="电话" prop="customerPhone">
            <el-input
              v-model="queryReserParams.customerPhone"
              placeholder="请输入顾客电话"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button>
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:role:add']"
              type="primary"
              plain
              icon="el-icon-plus"
              size="medium"
              @click="addReserve"
            >预定入住办理</el-button>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="24" :xs="24">
            <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
              <el-tab-pane label="预订单管理" name="first">
                <el-table v-loading="loading" :data="orderList">
                  <el-table-column label="预定单id" align="center" prop="reservationId" />
                  <el-table-column label="订房数量" align="center" prop="reservationNumber" />
                  <el-table-column label="起始时间" align="center" prop="startTime"><span slot-scope="scope">{{ dateFormat('YYYY-mm-dd HH:MM',scope.row.startTime) }}</span></el-table-column>
                  <el-table-column label="结束时间" align="center" prop="endTime"><span slot-scope="scope">{{ dateFormat('YYYY-mm-dd HH:MM',scope.row.endTime) }}</span></el-table-column>
                  <el-table-column label="房间类型" align="center" prop="hotelRoomType.roomGrade" />
                  <el-table-column label="账单金额" align="center" prop="totalAmount" />
                  <el-table-column label="顾客类别" align="center" prop="customerType" />
                  <el-table-column label="电话" align="center" prop="customerPhone" />
                  <el-table-column label="是否含早餐" align="center" prop="breakfast" />
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        v-hasPermi="['system:post:edit']"
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                      >修改</el-button>
                      <el-button
                        size="small"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="预定信息明细单" name="second">
                <el-table :data="orderItemList">
                  <el-table-column label="预定信息明细单id" align="center" prop="reservationInformationDetailId" />
                  <el-table-column label="订房数量" align="center" prop="reservationNumber" />
                  <el-table-column label="顾客姓名" align="center" prop="customerName" />
                  <el-table-column label="预订单id" align="center" prop="advanceOrderId" />
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        v-hasPermi="['system:post:edit']"
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                      >修改</el-button>
                      <el-button
                        size="small"
                        type="text"
                        icon="el-icon-delete"
                        @click="handledetailDelete(scope.row)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>

        <el-pagination
          align="center"
          :current-page="pageNum"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

      </el-col>
    </el-row>
    <!-- 修改预定配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="订房数量" prop="reservationNumber">
          <el-input v-model="form.reservationNumber" placeholder="请输入订房数量" />
        </el-form-item>
        <el-form-item label="房间类型id" prop="roomTypeId">
          <el-input v-model="form.roomTypeId" placeholder="请输入房间类型" />
        </el-form-item>
        <el-form-item label="账单金额" prop="totalAmount">
          <el-input v-model="form.totalAmount" placeholder="请输入账单金额" />
        </el-form-item>
        <el-form-item label="顾客类别" prop="customerType">
          <el-input v-model="form.customerType" placeholder="请输入顾客类别" />
        </el-form-item>
        <el-form-item label="电话" prop="customerPhone">
          <el-input v-model="form.customerPhone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="是否含早餐" prop="breakfast">
          <el-input v-model="form.breakfast" placeholder="请输入是否含早餐" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加预定办理入住配置对话框 -->
    <el-dialog title="预定办理入住" :visible.sync="diareserve" fullscreen="true" center>
      <el-form ref="reserveform" :model="reserveform" :rules="rules" label-width="auto">
        <!-- <div style="text-align:center"> -->
        <el-form-item label="房间号" prop="roomNo">
          <el-col :span="12">
            <el-input v-model="reserveform.roomNo" placeholder="请输入房间号" />
          </el-col>
          <el-button style="margin-left: 10px" type="primary" icon="el-icon-search" size="medium" @click="handleSearchRoom">查看房间</el-button>
        </el-form-item>
        <el-form-item label="手机号码" prop="customerPhone">
          <el-col :span="12">
            <el-input v-model="reserveform.customerPhone" placeholder="请输入手机号码" />
          </el-col>
        </el-form-item>
        <!-- </div> -->
      </el-form>
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="medium"
        @click="handleAddReserveCus"
      >添加顾客</el-button>
      <el-table :data="reservecustomerList">
        <el-table-column label="顾客姓名" align="center" prop="customerName" />
        <el-table-column label="身份证号" align="center" prop="identifyCard" />
        <!-- <el-table-column label="手机号码" align="center" prop="customerPhone" /> -->
      </el-table>

      <!-- 预定入住办理--查看房间配置对话框 -->
      <el-dialog title="查看房间" :visible.sync="diaroom" width="1000px" style="margin-top:-100px" append-to-body>
        <el-form ref="queryForm" :model="queryParams" :rules="rules" size="small" :inline="true">
          <el-form-item label="房间状态" prop="statusId">
            <el-select v-model="choose" placeholder="房间状态" clearable>
              <el-option label="空房" value="空房" @click.native="handleStatus" />
              <el-option label="已预定" value="已预定" @click.native="handleStatus" />
              <el-option label="已入住" value="已入住" @click.native="handleStatus" />
              <el-option label="待清理" value="待清理" @click.native="handleStatus" />
            </el-select>
          </el-form-item>
          <el-form-item label="房间等级" prop="roomTypeId">
            <el-select v-model="grade" placeholder="房间等级" clearable>
              <el-option label="商务房" value="商务房" @click.native="handleGrade" />
              <el-option label="双人大床房" value="双人大床房" @click.native="handleGrade" />
              <el-option label="总统套房" value="总统套房" @click.native="handleGrade" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-house"
              size="medium"
              :disabled="multiple"
              @click="selectRoom"
            >选择该房间</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
          <!-- 多选框 -->
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column label="房间号" align="center" prop="roomNo" />
          <el-table-column label="房间状态" align="center" prop="statusId">
            <!-- 使用tag改变颜色 -->
            <template slot-scope="scope">
              <div v-if="scope.row.statusId == 2">
                <el-tag
                  type="success"
                  effect="dark"
                  disable-transitions
                >{{ "空房" }}</el-tag>
              </div>
              <div v-if="scope.row.statusId == 4">
                <el-tag
                  type=""
                  effect="dark"
                  disable-transitions
                >{{ "已预定" }}</el-tag>
              </div>
              <div v-if="scope.row.statusId == 1">
                <el-tag
                  type="danger"
                  effect="dark"
                  disable-transitions
                >{{ "已入住" }}</el-tag>
              </div>
              <div v-if="scope.row.statusId == 3">
                <el-tag
                  type="warning"
                  effect="dark"
                  disable-transitions
                >{{ "待清理" }}</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          align="center"
          :current-page="pageNum"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-dialog>

      <!-- 添加顾客配置对话框 -->
      <el-dialog title="添加顾客" :visible.sync="diareservecustomer" width="600px" append-to-body>
        <el-form ref="reservecusform" :model="reservecusform" :rules="rules" label-width="100px">
          <el-form-item label="顾客姓名" prop="customerName">
            <el-input v-model="reservecusform.customerName" placeholder="请输入顾客姓名" />
          </el-form-item>
          <el-form-item label="身份证号" prop="identifyCard">
            <el-input v-model="reservecusform.identifyCard" placeholder="请输入身份证号" />
          </el-form-item>
          <!-- <el-form-item label="手机号码" prop="customerPhone">
            <el-input v-model="reservecusform.customerPhone" placeholder="请输入手机号码" />
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer" align="center">
          <el-button type="primary" @click="submitreservecusform">确 定</el-button>
          <el-button @click="reservecancel">取 消</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="submitFormReserve">确 定</el-button>
        <el-button @click="cancelReserve">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listOrderByPage, getOrder, addOrder, updateOrder, deleteOrder, delcheckinItem, listOrderItemByPage } from '@/api/checkin/reserveordermanage'
import { addReserveCustomer, cancelAddReservecus, reserveCheckin } from '@/api/checkin/liveroom'
import { listRoomByPage, listType, getType } from '@/api/manage/room'
// import { delcheckinItem } from '@/api/type'
export default {
  name: 'Item',
  data() {
    return {
      // 房间等级
      typeOptions: undefined,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      // 是否显示预定入住弹出层
      diareserve: false,
      // 是否显示查看房间弹出层
      diaroom: false,
      // 是否显示预定顾客弹出层
      diareservecustomer: false,
      // 查询房间列表
      typeList: [],
      // 查询房间下拉框
      choose: '',
      grade: '',
      // 选中预定信息单数组
      ids1: [],
      // 选中房间数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 图书表格数据
      orderList: [],
      orderItemList: [],
      activeTabName: 'first',
      // 弹出层标题
      title: '',
      customerList: [],
      reservecustomerList: [],
      // 预定入住表单参数
      reserveform: {
        roomNo: undefined
      },
      // 预定顾客表单参数
      reservecusform: {
        customerName: undefined
      },
      // 类型
      categoryOptions: undefined,
      // 是否显示弹出层
      open: false,
      value: '',
      // 查询参数
      queryReserParams: {
        pageNum: 1,
        pageSize: 10,
        reservationId: undefined,
        reservationNumber: undefined,
        totalAmount: undefined,
        customerPhone: undefined,
        roomTypeId: undefined
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roomId: undefined,
        roomNo: undefined,
        statusId: undefined,
        roomTypeId: undefined,
        roomGrade: undefined,
        hotelRoomType: undefined
      },
      items: [
        { type: 'success', label: '空房' },
        { type: '', label: '已预定' },
        { type: 'danger', label: '已入住' },
        { type: 'warning', label: '待清理' }
      ],
      // 表单参数
      form: {},
      rules: {
        orderNo: [
          { required: true, message: '订单编号不能为空', trigger: 'blur' }
        ],
        orderId: [
          { required: true, message: '订单ID不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.fetchRoomData()
    listType().then((response) => {
      this.typeOptions = response.data
    })
  },
  methods: {
    dateFormat(fmt, date) {
      let ret = ''
      date = new Date(date)
      const opt = {
		    'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
			  'd+': date.getDate().toString(), // 日
			  'H+': date.getHours().toString(), // 时
			  'M+': date.getMinutes().toString(), // 分
		    'S+': date.getSeconds().toString() // 秒
			        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
			 for (const k in opt) {
			   ret = new RegExp('(' + k + ')').exec(fmt)
			        if (ret) {
			    fmt = fmt.replace(
			    ret[1],
			    ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
			      )
			    }
			  }
			  return fmt
			    },
    /** 查询订单列表 */
    getList() {
      this.loading = true
      listOrderByPage(this.queryReserParams).then((response) => {
        // api接口数据
        this.orderList = response.data.list
        this.total = response.data.total
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        this.loading = false
      })
      this.loading = true
      listOrderItemByPage(this.queryReserParams).then((response) => {
        this.orderItemList = response.data.list
        this.total = response.data.total
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        this.loading = false
      })
    },
    /** 查询房间列表 */
    fetchRoomData() {
      this.loading = true
      listRoomByPage(this.queryParams).then((response) => {
        this.typeList = response.data.list
        this.total = response.data.total
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        this.loading = false
      })
    },
    /** 处理分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
      this.fetchRoomData()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
      this.fetchRoomData()
    },
    // 多选框预定信息单选中数据
    // handleSelectionChange1(selection) {
    //   this.ids1 = selection.map(item => item.reservationId)
    //   this.single = selection.length !== 1
    //   this.multiple = !selection.length
    // },
    // 多选框房间选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roomId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 下拉框选择操作 */
    handleStatus() {
      switch (this.choose) {
        case '已入住':
          this.queryParams.statusId = 1
          this.fetchRoomData()
          break
        case '空房':
          this.queryParams.statusId = 2
          this.fetchRoomData()
          break
        case '待清理':
          this.queryParams.statusId = 3
          this.fetchRoomData()
          break
        case '已预定':
          this.queryParams.statusId = 4
          this.fetchRoomData()
          break
      }
    },
    handleGrade() {
      switch (this.grade) {
        case '商务房':
          this.queryParams.roomTypeId = 1
          this.fetchRoomData()
          break
        case '双人大床房':
          this.queryParams.roomTypeId = 2
          this.fetchRoomData()
          break
        case '总统套房':
          this.queryParams.roomTypeId = 3
          this.fetchRoomData()
          break
      }
    },
    /** 查看房间操作 */
    handleSearchRoom() {
      this.diaroom = true
    },
    /** 新增预定入住并选入电话号码操作 */
    addReserve() {
      // const postId = row.reservationId || this.ids1
      // getOrder(postId).then((response) => {
      //   this.reserveform = response.data})
      this.diareserve = true
    },
    /** 选择房间号操作 */
    selectRoom(row) {
      this.resetForm()
      const postId = row.roomId || this.ids
      getType(postId).then((response) => {
        this.reserveform = response.data
      })
      this.diaroom = false
    },
    /** 添加预定入住顾客 */
    submitreservecusform() {
      addReserveCustomer(this.reservecusform).then((response) => {
        this.reservecustomerList = response.data.customerList
        // this.$message.success('操作成功')
        this.resetForm()
        this.diareservecustomer = false
      })
    },
    /** 确认预定入住办理 */
    submitFormReserve() {
      reserveCheckin(this.reserveform).then((response) => {
        const flag = response.data
        if (flag) {
          this.$message.success('预定入住成功')
        } else {
          this.$message.error('操作失败')
        }
        this.diareserve = false
        this.cancelReserve()
        this.getList()
      })
    },
    // 顾客表单重置
    resetForm() {
      this.reservecusform = {
        customerName: undefined,
        identityCard: undefined
        // cusstomerPhone: undefined
      }
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        roomId: undefined,
        roomNo: undefined,
        statusId: undefined,
        roomTypeId: undefined
      }
    },
    /** 新增预定入住顾客操作 */
    handleAddReserveCus() {
      // this.resetForm()
      this.diareservecustomer = true
    },
    /** 关闭预定入住办理对话框并清除顾客缓存 */
    cancelReserve() {
      cancelAddReservecus(this.reservecusform).then((response) => {
        this.diareserve = false
        this.clearAllData()
        this.fetchData()
      })
      this.getList()
    },
    /** 关闭添加预定顾客对话框 */
    reservecancel() {
      this.diareservecustomer = false
      this.resetForm()
    },
    /** 清除数据 */
    clearAllData() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    /** 预定信息单取消按钮 */
    cancel() {
      this.open = false
      this.resetFormReList()
    },
    /** 预定信息单重置 */
    resetFormReList() {
      this.form = {
        reservationId: undefined,
        reservationNumber: undefined,
        totalAmount: undefined,
        customerPhone: undefined,
        roomTypeId: undefined
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
      this.$message.success('查询成功')
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryReserParams = {
        pageNum: 1,
        pageSize: 10,
        reservationId: undefined,
        reservationNumber: undefined,
        totalAmount: undefined,
        customerPhone: undefined,
        roomTypeId: undefined
      }
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        roomId: undefined,
        roomNo: undefined,
        statusId: undefined,
        roomTypeId: undefined
      }
      this.choose = undefined
      this.grade = undefined
      this.fetchRoomData()
      this.getList()
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.resetFormReList()
      getOrder(row.reservationId).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改订单'
      })
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.title === '修改订单') {
            updateOrder(this.form).then((response) => {
              this.open = false
              this.title = ''
              this.getList()
              this.$message.success('修改成功') // 后端返回消息字符串
            })
          } else {
            addOrder(this.form).then((response) => {
              this.open = false
              this.title = ''
              this.getList()
              this.$message.success('添加成功')
            })
          }
        }
      })
    },
    /** 删除入住信息单按钮操作 */
    handleDelete(row) {
      this.$confirm(
        '是否确认删除电话为"' + row.customerPhone + '"的数据?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return deleteOrder(row.reservationId)
        })
        .then(() => {
          this.getList()
          this.$message.success('删除成功')
        })
        .catch(() => {})
    },
    /** 删除入住信息明细单按钮操作 */
    handledetailDelete(row) {
      this.$confirm(
        '是否确认删除姓名为"' + row.customerName + '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return delcheckinItem(row.reservationInformationDetailId)
        })
        .then(() => {
          this.getList()
          this.$message.success('删除成功')
        })
        .catch(() => {})
    }
  }
}
</script>
<style>
.el-button{
  margin-bottom: 15px;
}
</style>
